<template>
  <div id="app" class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
    <div class="row">
      <div class="ibox float-e-margins">
        <div class="ibox-content col-md-12">
          <form id="casesForm" method="post" class="form m-t" @submit.prevent="save()" accept-charset="UTF-8">
            <input type="hidden" name="id" v-model="item.id"/>
            <input type="hidden" name="token" v-model="item.token"/>
            <input type="hidden" name="newFlag" v-model="newFlag"/>
            <div class="clearfix "></div>
            <div class="col-md-6 b-r">

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">案件编号：</label>
                <div class="col-md-12">
                  <input id="bean-caseCode" name="caseCode" v-model="item.caseCode" class="form-control" type="text"
                      placeholder="请输入案件编号" required="" aria-required="true" aria-describedby="bean-caseCode-error"
                      maxlength="50" aria-invalid="true">
                  <span id="bean-caseCode-error" class="help-block m-b-none" for="bean-caseCode"></span>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">案件名称：</label>
                <div class="col-md-12">
                  <input id="bean-caseName" name="caseName" v-model="item.caseName" class="form-control" type="text"
                      placeholder="请输入案件名称" required="" aria-required="true" aria-describedby="bean-caseName-error"
                      maxlength="100" aria-invalid="true">
                  <span id="bean-caseName-error" class="help-block m-b-none" for="bean-caseName"></span>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">案件类别：</label>
                <div class="col-md-12">
                  <select data-placeholder="选择案件类别" id="bean-caseType" name="caseType"
                      class="form-control" aria-describedby="bean-caseType-error" maxlength="50"
                      aria-invalid="true">
                    <option value="">--请选择案件类别--</option>
                    <option value="非法排污" :selected="'非法排污' === item.caseType">非法排污</option>
                    <option value="非法设障" :selected="'非法设障' === item.caseType">非法设障</option>
                    <option value="非法捕捞" :selected="'非法捕捞' === item.caseType">非法捕捞</option>
                    <option value="非法养殖" :selected="'非法养殖' === item.caseType">非法养殖</option>
                    <option value="非法采砂" :selected="'非法采砂' === item.caseType">非法采砂</option>
                    <option value="非法围垦" :selected="'非法围垦' === item.caseType">非法围垦</option>
                    <option value="非法侵占水域岸线" :selected="'非法侵占水域岸线' === item.caseType">非法侵占水域岸线</option>
                    <option value="其他" :selected="'其他' === item.caseType">其他</option>
                  </select>
                  <!--<input id="bean-caseType" name="caseType" v-model="item.caseType" class="form-control" type="text"  placeholder="请输入案件类别"  aria-describedby="bean-caseType-error"  maxlength="50"   aria-invalid="true">-->
                  <span id="bean-caseType-error" class="help-block m-b-none" for="bean-caseType"></span>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">案发地点：</label>
                <div class="col-md-12">
                  <input id="bean-caseAddr" name="caseAddr" v-model="item.caseAddr" class="form-control" type="text"
                      placeholder="请输入案发地点" aria-describedby="bean-caseAddr-error" maxlength="100"
                      aria-invalid="true">
                  <span id="bean-caseAddr-error" class="help-block m-b-none" for="bean-caseAddr"></span>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">所在经度：<a href="javascript:;" @click="getCoordinate()"
                    class="label label-success"><i
                    class="fa fa-coordinate"></i>坐标拾取</a></label>
                <div class="col-md-12">
                  <input id="bean-longitude" name="longitude" v-model="item.longitude" class="form-control"
                      type="number" placeholder="请输入所在经度" required="" aria-required="true"
                      aria-describedby="bean-longitude-error" aria-invalid="true">
                  <span id="bean-longitude-error" class="help-block m-b-none" for="bean-longitude"></span>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">所在纬度：</label>
                <div class="col-md-12">
                  <input id="bean-latitude" name="latitude" v-model="item.latitude" class="form-control" type="number"
                      placeholder="请输入所在纬度" required="" aria-required="true" aria-describedby="bean-latitude-error"
                      aria-invalid="true">
                  <span id="bean-latitude-error" class="help-block m-b-none" for="bean-latitude"></span>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">立案时间：</label>
                <div class="col-md-12">
                  <input id="bean-filingTime" name="filingTime" v-model="item.filingTime"
                      class="laydate-icon form-control layer-date" type="text" placeholder="请输入立案时间"
                      aria-describedby="bean-filingTime-error" aria-invalid="true">
                  <span id="bean-filingTime-error" class="help-block m-b-none" for="bean-filingTime"></span>
                </div>
              </div>
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">当事人：</label>
                <div class="col-md-12">
                  <input id="bean-iitigant" name="iitigant" v-model="item.iitigant" class="form-control" type="text"
                      placeholder="请输入当事人" aria-describedby="bean-iitigant-error" maxlength="100"
                      aria-invalid="true">
                  <span id="bean-iitigant-error" class="help-block m-b-none" for="bean-iitigant"></span>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">案情介绍：</label>
                <div class="col-md-12">
                  <input id="bean-caseIntroduction" name="caseIntroduction" v-model="item.caseIntroduction"
                      class="form-control" type="text" placeholder="请输入案情介绍"
                      aria-describedby="bean-caseIntroduction-error" maxlength="255" aria-invalid="true">
                  <span id="bean-caseIntroduction-error" class="help-block m-b-none" for="bean-caseIntroduction"></span>
                </div>
              </div>

            </div>
            <div class="col-md-6">

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">案件处理情况：</label>
                <div class="col-md-12">
                  <select data-placeholder="选择案件处理情况" id="bean-caseHandling" name="caseHandling"
                      class="form-control" aria-describedby="bean-caseHandling-error" maxlength="50"
                      aria-invalid="true">
                    <option value="">--请选择案件处理情况--</option>
                    <option value="未结案" :selected="'未结案' === item.caseHandling">未结案</option>
                    <option value="已结案" :selected="'已结案' === item.caseHandling">已结案</option>
                  </select>
                  <!--<input id="bean-caseHandling" name="caseHandling" v-model="item.caseHandling" class="form-control" type="text"  placeholder="请输入案件处理情况"  aria-describedby="bean-caseHandling-error"  maxlength="50"   aria-invalid="true">-->
                  <span id="bean-caseHandling-error" class="help-block m-b-none" for="bean-caseHandling"></span>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">处理结果：</label>
                <div class="col-md-12">
                  <input id="bean-handlingResult" name="handlingResult" v-model="item.handlingResult"
                      class="form-control" type="text" placeholder="请输入处理结果"
                      aria-describedby="bean-handlingResult-error" maxlength="100" aria-invalid="true">
                  <span id="bean-handlingResult-error" class="help-block m-b-none" for="bean-handlingResult"></span>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">结案方式：</label>
                <div class="col-md-12">
                  <input id="bean-closingMethod" name="closingMethod" v-model="item.closingMethod" class="form-control"
                      type="text" placeholder="请输入结案方式" aria-describedby="bean-closingMethod-error" maxlength="100"
                      aria-invalid="true">
                  <span id="bean-closingMethod-error" class="help-block m-b-none" for="bean-closingMethod"></span>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">结案时间：</label>
                <div class="col-md-12">
                  <input id="bean-closingTime" name="closingTime" v-model="item.closingTime"
                      class="laydate-icon form-control layer-date" type="text" placeholder="请输入结案时间"
                      aria-describedby="bean-closingTime-error" aria-invalid="true">
                  <span id="bean-closingTime-error" class="help-block m-b-none" for="bean-closingTime"></span>
                </div>
              </div>
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">案件承办部门：</label>
                <div class="col-md-12">
                  <input id="bean-handlingDepartment" name="handlingDepartment" v-model="item.handlingDepartment"
                      class="form-control" type="text" placeholder="请输入案件承办部门"
                      aria-describedby="bean-handlingDepartment-error" maxlength="50" aria-invalid="true">
                  <span id="bean-handlingDepartment-error" class="help-block m-b-none"
                      for="bean-handlingDepartment"></span>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">承办人：</label>
                <div class="col-md-12">
                  <input id="bean-undertaker" name="undertaker" v-model="item.undertaker" class="form-control"
                      type="text" placeholder="请输入承办人" aria-describedby="bean-undertaker-error" maxlength="50"
                      aria-invalid="true">
                  <span id="bean-undertaker-error" class="help-block m-b-none" for="bean-undertaker"></span>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">行政区划：</label>
                <div class="col-md-12">
                  <!--<input id="bean-regionId" name="regionId" v-model="item.regionId" class="form-control" type="text"-->
                  <!--placeholder="请输入行政区划" aria-describedby="bean-regionId-error" maxlength="50"-->
                  <!--aria-invalid="true">-->
                  <region-select :region-ids="item.regionId"/>
                  <span id="bean-regionId-error" class="help-block m-b-none" for="bean-regionId"></span>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">备注：</label>
                <div class="col-md-12">
                  <input id="bean-memo" name="memo" v-model="item.memo" class="form-control" type="text"
                      placeholder="请输入备注" aria-describedby="bean-memo-error" maxlength="255" aria-invalid="true">
                  <span id="bean-memo-error" class="help-block m-b-none" for="bean-memo"></span>
                </div>
              </div>

            </div>

            <div class="clearfix "></div>
            <div class="col-12 text-center" style="height: 50px;">
              <div>
                <input class="btn btn-primary" type="submit" value="保存"/> | <a @click="lbox.closeMyBoxLayer()" class="btn btn-danger" href="javascript:">返回</a>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import '@/assets/css/style.css'

import $ from '@/assets/js/jquery-vendor.js'
import 'jquery.cookie'
import axios from 'axios'
import '@/assets/js/validate/validation-vendor.js'

import 'layui-laydate/dist/theme/default/laydate.css'
import laydate from 'layui-laydate'
import {apiUtil, axiosContentType, site} from '@/assets/js/boss'
import regionSelect from './regionSelect'

export default {
  data() {
    return {
      item: {},
      newFlag: 0,
      uuidToken: ''
    }
  },
  components: {
    regionSelect
  },
  mounted() {
    let that = window.$vueApp = this;
    document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
    $('#casesForm').validate();
    that.staff.init(function () {
      that.newFlag = sessionStorage.getItem(site.cases.info);
      if (that.newFlag) that.uuidToken = apiUtil.guid();
      if (apiUtil.existSessionKey(site.cases.info)) {
        that.info();
      }
    });

    laydate.render({
      elem: '#bean-filingTime',
      event: 'click',
      type: 'datetime',
      format: 'yyyy-MM-dd HH:mm:ss',
      done: function (val) {
        that.item.filingTime = val;
      }
    });
    //
    laydate.render({
      elem: '#bean-closingTime',
      event: 'click',
      type: 'datetime',
      format: 'yyyy-MM-dd HH:mm:ss',
      done: function (val) {
        that.item.closingTime = val;
      }
    });
  },
  methods: {
    info() {
      let that = window.$vueApp = this;
      axios.get(site.cases.info + sessionStorage.getItem(site.cases.info), {}).then(function (response) {
        const result = response.data;
        if (result.code === 0) {
          that.item = result.data;
        } else {
          alert(result.message);
        }
      });
    },
    save() {
      let that = window.$vueApp = this;
      if ($('#casesForm').valid()) {
        axios.post(site.cases.save, $('#casesForm').serialize(),
            axiosContentType.xWwwFormUrlencoded).then(function (response) {
          const result = response.data;
          // console.info("获取数据.." + JSON.stringify(result));
          if (result.code === 0) {
            parent.$vueApp.page();
            alert('保存成功!');
            that.lbox.closeMyBoxLayer()
          } else {
            alert(result.message);
          }
        });
      }
    },
    getCoordinate() { // 坐标拾取页面
      let that = window.$vueApp = this;
      that.lbox.openMyBoxLayer('经纬度坐标拾取', site.map.mapll);
    },
    setMapSite(longitude, latitude, address) { // 坐标拾取回调
      let that = window.$vueApp = this;
      $('#bean-longitude').val(longitude);
      $('#bean-latitude').val(latitude);
      that.item.longitude = longitude;
      that.item.latitude = latitude;
    }
  }
}
</script>

